<template>
    <div>
        <div class="apply">
            <div class="next">
                <!-- 阴影 -->
                <div class="bg-img"></div>
                <img src="../assets/ld/img/background1.png" class='back1'>
                <div class='logo'>
                    <p class='shopPerson'>个人商家入驻</p>
                    <p class='heaven'>天下没有难做的生意</p>
                </div>
                <div class='wow'>
                    <button><router-link class='want' to="/">回到首页</router-link></button>
                </div>
                <div class="shopping">
                    <p class='drawer'><i class="el-icon-user-solid" style="color:#1989fa;margin-right:5px"></i>个人店铺</p>
                    <el-form ref="form" :model="sizeForm" label-width="80px" size="mini" :rules="rules">
                        <el-form-item label="店铺名字" prop="name">
                            <el-input v-model="sizeForm.name" name='shopName'></el-input>
                        </el-form-item>
                        <el-form-item label="商家电话" prop="phone">
                            <el-input v-model="sizeForm.phone" name='shopPhone'></el-input>
                        </el-form-item>
                        <el-form-item label="店铺地址" prop="location">
                            <el-input v-model="sizeForm.location" name='shopLocation'></el-input>
                        </el-form-item>
                        <el-form-item label="店铺范围" prop="region">
                            <el-input v-model="sizeForm.region" name='shopRange'></el-input>
                        </el-form-item>
                        <el-form-item label="店铺性质" prop="type">
                            <el-input v-model="sizeForm.type" name='shopTag'></el-input>
                        </el-form-item>
                        <el-form-item label="店铺封面" prop="imageUrl">
                            <el-input v-model="sizeForm.imageUrl" type="file" name='file' id='file' @change="sendFile" style="display:none">
                            </el-input>
                             <i class="el-icon-plus avatar-uploader-icon" style="font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center; border:1px dashed #8c939d;position:relative;z-index:10;" @click="showImg()">
                                 <img src="" alt="" id='setImg' @mouseover="move" @mouseout="leave">
                                <div class='shadow'>
                                    <i class='el-icon-close' @click.stop="clearImg"></i>
                                </div>
                             </i>    
                        </el-form-item>
                        <el-form-item label="用户id" style="display:none">
                            <el-input v-model="sizeForm.userId" name='userId'></el-input>
                        </el-form-item>
                        <el-form-item size="large">
                            <el-button type="primary" @click="onSubmit">立即创建</el-button>
                            <el-button>取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import cookie from '../cookie/index'
export default {
    name:'ApplyShop',
    data() {
      return {
        sizeForm: {
          name: '',
          phone:'',
          location:'',
          region: '',
          delivery: false,
          type: '',
          imageUrl:'',
          userId:"7"
        },
        formData: new FormData(),
        rules:{
            name: [
                { required: true, message: '请输入店铺名字', trigger: 'blur' },
            ],
            phone: [
                { required: true, message: '请输入电话号码', trigger: 'change' },
                {min:11,max:11,message:'你的号码不正确电话号码11位'}
            ],
            location: [
                { required: true, message: '请输入你的所在地', trigger: 'blur' }
            ],
            region: [
                { required: true, message: '请输入店铺的范围', trigger: 'blur' }
            ],
            type: [
                { required: true, message: '请输入店铺类型', trigger: 'blur' }
            ],
            imageUrl: [
                { required: true, trigger: 'blur' }
            ],
        }
        // imageUrl:'',
      };
    },
    methods: {
        sendFile(){
            let files = document.getElementById('file')
            console.log(files.files[0]);
            this.formData.append('storeCover',files.files[0])
        },
        // form表单提交
        onSubmit() {
            console.log(this.sizeForm);
            this.$http({
                url:'/shops/shopper/store/addStore',
                method:'post',
                headers:{
                    'Content-Type': 'multipart/form-data',
                    'Authorization':cookie.getToken()
                },
                data:this.formData,
                params:{
                    shopName:this.sizeForm.name,
                    shopPhone:this.sizeForm.phone,
                    shopLocation:this.sizeForm.location,
                    shopRange:this.sizeForm.region,
                    shopTag:this.sizeForm.type,
                    shopCover:this.sizeForm.imageUrl,
                    userId:this.sizeForm.userId   
                }
            })
            .then(data => {
                console.log(data);
                if(data.data.code === 199){
                    this.$message({
                        message:data.data.message,
                        type:'warning',
                        center:true
                    })
                }else if(data.data.code === 200){
                   this.$message({
                        message:'已提交,等待审核',
                        type:'success',
                    })                   
                }
            })
            .catch(error => {
                console.log(error);
            })
        },
        // 展示图片
        showImg(){
            var file =  document.getElementById("file")
            file.click(); 
             // 监听input变化事件
            file.addEventListener("change",function(){
                var reader = new FileReader();
                reader.readAsDataURL(file.files[0]);
                reader.onload=function(){
                    var bookImg = document.getElementById("setImg");
                    bookImg.src = this.result
                    bookImg.style.width='178px'
                    bookImg.style.height='178px'
                }
            })
        },
        clearImg(){
            var obj = document.getElementById('file');
            var bookImg = document.getElementById("setImg")
            obj.outerHTML =  obj.outerHTML;
            bookImg.src = ''
            bookImg.style.width='0'
            bookImg.style.height='0'            
        },
        // 鼠标移上，阴影会出来
            move(){
                var shadow  = document.getElementsByClassName('shadow')[0];
                shadow.style.display = 'block';
            },
            leave(){
                var shadow  = document.getElementsByClassName('shadow')[0];
                shadow.style.display = 'none';
            }
        
    },
}
</script>
<style lang="less" scoped>
// 上传图片的样式
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  #setImg{
      position: absolute;
      left: 0;
      z-index: 20;
  }
  .shadow{
      width: 178px;
      height: 178px;
      position: absolute;
      left: 0;
      background: rgba(0,0,0,.1);
      color: white;
      font-size: 14px;
      z-index: 90;
      top: 0;
      display: none;
  }
    body{
        margin:0;
        height: 100%;
    }
    .apply{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .next{
        margin: 0 auto;
        position: relative;
        height: 100%;
        overflow: hidden;
        .bg-img{
            background-color: rgba(0, 0,0,.6);
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            transition: opacity .3s linear;
            box-sizing: content-box;
            z-index: 10;
        }
        .back1{
            width: 100%;
            z-index: -10;
        }
        .logo{
            position: absolute;
            left: 10%;
            top: 20%;
            z-index: 100;
            .shopPerson{
                font-size: 36px;
                color: white;
                letter-spacing: 10px;
            }
            .heaven{
                font-size: 20px;
                color: white;
                letter-spacing: 10px;
            }
        }
        .wow{
            position: absolute;
            left: 25%;
            top: 40%;
            z-index: 100;
            button{
                color: white;
                font-size: 16px;
                padding: 5px 50px;
                border: 1px solid white;
                outline: none;
                cursor: pointer;
                border-radius: 25px;
                background-color: transparent;
                a{
                    text-decoration: none;
                    color: white;
                }
            }
        }
        .shopping{
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            width: 40%;
            box-sizing: content-box;
            z-index: 999;
            background: #fff;
            color: black;
            padding: 20px;
            .drawer{
                text-align: center;
                font-size: 20px;
                margin:15px 0 28px 0;
            }
        }
    } 
</style>